<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Alipay</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
    <script th:src="@{/js/qrcode.min.js}"></script>
</head>
<style>
    table {
        border-collapse: separate;
        border-spacing: 10px;
        width: 100%;
    }

    table td p {
        text-align: left;
    }

    table td {
        text-align: center;
    }

    table td span {
        color: red;
        font-size: 24px;
        font-weight: bold;
    }

    #qrcode {
        width: 160px;
        height: 160px;
        margin: 0 auto;
        margin-top: 10px;
        position: relative;
        text-align: center;
    }

</style>
<body>
<div class="alipayorder" id="alipayorder">

    <table>
        <tr>
            <td>
                <div id="timeout">
                    <label>剩余支付时间:</label><label style="color: #ff9655" id="min"></label>：<label style="color: #ff9655"
                                                                                                 id="second"></label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                请在5分钟内支付完成<br/><br/>
                订单金额：<span th:text="'￥' + ${channelOrder.amount}"></span>
            </td>
        </tr>
    </table>
    <table>
        <tr>
            <td id="text">
                <span>支付步骤</span>
                <p>
                    <span>1、请先关闭支付宝客户端；</span><br/>
                    2、点击“立即支付”，自动打开支付宝客户端；<br/>
                    3、显示2小时内到帐，实际支付2分钟到帐；<br/>
                    4、请先执行步骤1的操作，成功率<span>100%</span>；<br/>
                </p>
                <a id="qdZfb" href="javascript:void(0)"
                   style="width: 300px;cursor: pointer; color: #fff;text-decoration: none; text-align: center;padding: .55rem 0; display: inline-block;border-radius: .3rem; font-size: 14px;background-color: #428bca; border: 1px solid #428bca;letter-spacing:normal;font-weight: normal">立即支付</a>
            </td>
        <tr bgcolor="#CCCCCC">
            <td>&nbsp;</td>
        </tr>
        </tr>
    </table>

    </td>
    </tr>
    <tr bgcolor="#CCCCCC">
        <td>&nbsp;</td>
    </tr>
    </table>
</div>
<script type="text/javascript">

    var time = [[${time}]];
    time = parseInt(time / 1000);

    function getClockString(str) {
        if (str < 10) {
            return '0' + str;
        }
        return str;
    }

    function clock() {
        var min = getClockString(parseInt(time / 60));
        var second = getClockString(parseInt(time % 60));
        document.getElementById("min").innerHTML = (min);
        document.getElementById("second").innerHTML = (second);
        if (min <= 0 && second <= 0) {
            console.log("time:" + 0000);
            return;
        }
        time--;
        setTimeout(function () {
            clock()
        }, 1000);
    }

    clock();

    var interval = window.setInterval(function () {
        var orderId = '[[${channelOrder.orderId}]]';
        var url = "../orderStatus/" + orderId;
        $.get(url, function (data) {
            if (data.data.successTime) {
                window.clearInterval(interval);
                $('#alipayorder').html('<div style="color: red;font-size: 25px;">支付成功,切勿重复支付!</div>')
                // 跳转地址
            } else if (data.data.orderStatus == '4') {
                window.clearInterval(interval);
                $('#alipayorder').html('<div style="color: red;font-size: 25px;">订单超时,切勿付款!</div>')
                // 跳转地址
            }
        })
    }, 5000)

    // 启动支付宝
    $('#qdZfb').click(function () {
        var qrcodeStr = '[[${qrcode}]]';
        location.href = "alipays://platformapi/startapp?appId=20000067&url=" + encodeURIComponent(qrcodeStr);
    });

</script>
</body>
</html>